<template>
<table class="table-border" border="1" cellpadding="0">
    <thead>
        <tr>
            <td>教师编号</td>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
            <th>电话</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.addr}}</td>
            <td>{{item.phone}}</td>
        </tr>
    </tbody>
   
</table>
</template>

<script setup lang="ts">
const info=[
    {
        id:1,
        name:'张三',
        age:20,
        gender:'男',
        addr:"北京市海淀区",
        phone:15111608876
    },
    {
        id:2,
        name:'李四',
        age:22,
        gender:'女',
        addr:"上海市浦东新区",
        phone:13811160887
    },
    {
        id:3,
        name:'王五',
        age:25,
        gender:'男',
        addr:"广州市天河区",
        phone:13611160887
    },
    {
        id:4,
        name:'赵六',
        age:28,
        gender:'女',
        addr:"深圳市南山区",
        phone:13511160887   
    },
    {
        id:5,
        name:'钱七',
        age:21,
        gender:'男',
        addr:"南京市鼓楼区",
        phone:13711160887
    },
    {
        id:6,
        name:'孙八',
        age:23,
        gender:'女',
        addr:"杭州市西湖区",
        phone:13911160887
    },
    {
        id:7,
        name:'周九',
        age:24,
        gender:'男',
        addr:"成都市武侯区",
        phone:13411160887
    },
    {
        id:8,
        name:'吴十',
        age:26,
        gender:'女',
        addr:"武汉市洪山区",
        phone:13211160887
    },
    {
        id:9,
        name:'郑十一',
        age:27,
        gender:'男',
        addr:"重庆市渝中区",
        phone:13311160887
    },
    {
        id:10,
        name:'李十二',
        age:29,
        gender:'女',
        addr:"上海市浦东新区",
        phone:13011160887
    }
]
</script>